/**
 * Toggle
 */

@use '../../../css/mixins/components';
@use '../../../css/functions/properties';

.toggle {
    position: relative;
    margin-bottom: 0;
    display: flex;

    .toggle-label {
        @include components.color('toggle', 'label', true);
        @include components.font-size('toggle', 'label', true);

        display: flex;
        align-items: center;
        position: relative;
        margin: 0;

        &::before {
            @include components.background('toggle');
            @include components.box-shadow('toggle');
            @include components.border-width('toggle');
            @include components.border-style('toggle');
            @include components.border-color('toggle');
            @include components.border-radius('toggle');
            @include components.width('toggle');
            @include components.height('toggle');
            @include components.transition('toggle');
            @include components.margin('toggle');

            content: '';
            position: relative;
            display: inline-block;
            cursor: pointer;
            flex-shrink: 0;
            flex-grow: 0;
        }

        &::after {
            @include components.background('toggle', 'indicator');
            @include components.border-radius('toggle', 'indicator', true);
            @include components.transition('toggle', 'indicator', true);
            @include components.width('toggle', 'indicator');
            @include components.height('toggle', 'indicator');

            content: '';
            position: absolute;
            display: block;
            top: 50%;
            left: 0;
            z-index: 1;
            transform: translate(0, 0);
            margin-top: calc(#{properties.height('toggle', 'indicator')} / -2);
            margin-left: calc(
                #{properties.height('toggle')} / 2 - #{properties.height('toggle', 'indicator')} / 2
            );
        }
    }

    &.-rounded {
        .toggle-label {
            &::before {
                @include components.border-radius('toggle', 'rounded', properties.height('toggle'));
            }

            &::after {
                @include components.border-radius(
                    'toggle',
                    'rounded',
                    properties.height('toggle', 'indicator')
                );
            }
        }
    }

    > input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;

        &:checked + .toggle-label {
            &::before {
                @include components.background('toggle', 'checked');
                @include components.border-color('toggle', 'checked');
            }

            &::after {
                @include components.background('toggle', 'checked' 'indicator');

                transform: translate(calc(#{properties.width('toggle')} * 0.5), 0);
            }
        }

        &:focus + .toggle-label::before {
            box-shadow: 0 0 1px #{properties.background('toggle', 'checked')};
        }

        &:disabled + .toggle-label {
            &::before,
            &::after {
                cursor: not-allowed;
            }
        }

        @each $state in ('disabled' 'readonly') {
            &[#{$state}] {
                + .toggle-label {
                    @include components.color('toggle' $state, 'label', true);

                    cursor: default;

                    &::before {
                        @include components.background('toggle', $state, true);
                        @include components.border-color('toggle', $state, true);
                    }

                    &::after {
                        @include components.background('toggle', $state 'indicator', true);
                    }
                }

                &:checked + .toggle-label {
                    &::before {
                        @include components.background('toggle', 'checked' $state, true);
                        @include components.border-color('toggle', 'checked' $state, true);
                    }

                    &::after {
                        @include components.background(
                            'toggle',
                            'checked' $state 'indicator',
                            properties.background-h('toggle', $state 'indicator')
                                properties.background-s('toggle', $state 'indicator')
                                properties.background-l('toggle', $state 'indicator')
                                properties.background-a('toggle', $state 'indicator')
                        );
                    }
                }
            }
        }
    }
}
